<template>
  <div>
    <!-- 红色导航条，可以不要 -->
    <my-navbar></my-navbar>
    <!-- 轮播图 -->
    <swiper
      @mouseover.native="stopSwiper"
      @mouseout.native="startSwiper"
      ref="swiper"
      class="swiper"
      :options="swiperOptions"
    >
      <swiper-slide
        v-for="{ imageUrl, targetId } in banner.banners"
        :key="targetId"
      >
        <img :src="imageUrl" alt="" />
      </swiper-slide>
      <!-- 分页器 -->
      <div class="swiper-pagination" slot="pagination"></div>
      <!-- 左右箭头 -->
      <div class="swiper-button-prev" slot="button-prev"></div>
      <!--左箭头-->
      <div class="swiper-button-next" slot="button-prev"></div>
      <!--右箭头-->
    </swiper>
    <!-- 整个轮播图下的页面 -->
    <index-floor></index-floor>
  </div>
</template>

<script>
import myNavbar from "@/components/myNavbar.vue";
import IndexFloor from "@/components/IndexFloor.vue";
export default {
  components: { myNavbar, IndexFloor },
  mounted() {
    this.getBanner();
  },
  data() {
    return {
      banner: [],
      swiperOptions: {
        effect: "fade",
        loop: true,
        autoplay: {
          delay: 4000,
          disableOnInteraction: false,
        },
        // 分页器
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        //左右箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
  methods: {
    // 鼠标进入时
    stopSwiper() {
      this.$refs.swiper.$swiper.autoplay.stop();
    },
    // 鼠标离开时
    startSwiper() {
      this.$refs.swiper.$swiper.autoplay.start();
    },
    // 发送请求
    getBanner() {
      this.axios.get("/banner").then((res) => {
        this.banner = res.data;
        console.log(this.banner);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.swiper {
  width: 980px;
  margin: 5px auto;
  img {
    width: 100%;
  }
  .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
  }
  .swiper-button-prev:after,
  .swiper-button-next:after {
    font-size: 32px;
  }
}
</style>